<template>
  <div class="creator-top-nav-wrapper">
    <div class="creator-top-nav">
      <img src="@/assets/image/logo.png" alt="ToKnow" class="logo"
      @click="$open('/')">

      <div class="creator-sign">
        创作者中心
      </div>

      <user-card class="user-card"></user-card>
    </div>
  </div>
</template>

<script>
import UserCard from '@c/TopNavCom/UserCard.vue';

  export default {
    components: {
      UserCard
    },
    data() {
      return {
        choices: [
          '文章',
          '资源'
        ],
        choiceIdx: 0,
      }
    },
    methods: {
      changeChoice(idx) {
        if(this.choiceIdx === idx) return;
        this.choiceIdx = idx;
        if(idx === 1) this.$router.push('/pub/resource');
        else this.$router.push('/pub/article');
      }
    },
  }
</script>

<style lang="less" scoped>
.creator-top-nav-wrapper {
  width: 100vw;
  height: var(--topNavHeight);
  background-color: white;

  .creator-top-nav {
    width: var(--outerWidth);
    height: 100%;
    margin: 0 auto;

    img,
    .creator-sign {
      float: left;
      height: 100%;
    }

    .logo:hover {
      cursor: pointer;
    }

    .creator-sign {
      --w: 250px;
      --fs: calc(var(--topNavHeight) * 0.3);
      --w1: calc(var(--w) * 0.35);
      --w2: calc(var(--w) - var(--w1));
      margin-left: var(--topNavHeight);
      width: var(--w);
      height: var(--topNavHeight);
      line-height: var(--topNavHeight);
      color: var(--blue);
      font-size: var(--fs);
      font-weight: bold;
      text-shadow: 0 0 40px var(--lightBlue);
    }

    .user-card {
      float: right;
      margin-right: 50px;
      --userCardWidth: 140px;
      --userCardHeight: var(--topNavHeight);
      --userCardInnerHeight: calc(var(--topNavHeight) * 7 / 12);
    }
  }
}
</style>